Anar a tipus de selectors

Selectors d'atributs: altres atributs en CSS

Ara tractarem els selectors d'atributs que no siguin ni id ni classes com per exemple href. Aquí teniu una llista dels atributs actuals.

1. SELECTOR ATRIBUT

Farem servir els claudàtors o claus quadrades en el full d'estils de CSS i posarem el nom de l'atribut a l'interior.

      
        [atribut]{
          propietat: valor;
        }
      
    

      
        [href]{
          background-color: purple;
        }
      
    

Tots els elements que tenen l'atribut href es posen de color coral en aquest cas.

2. SELECTOR ATRIBUT I VALOR EXACTE

Farem servir, entre claudàtors, el nom de l'atribut, signe igual i el seu valor entre cometes, com en l'exemple.

      
        [href="https://google.com"]{
          background-color: orangered;
        }
      
    

3. SELECTOR ATRIBUT I VALOR QUE COMENCI PER

Farem servir, entre claudàtors, el nom de l'atribut, el signe del barretet chinès, el signe igual i el seu valor, com en l'exemple.

      
        [href^="color"]{
          background-color: red;
        }
      
    

4. SELECTOR ATRIBUT I QUE CONTENGUI UN CERT VALOR

Farem servir, entre claudàtors, el nom de l'atribut, l'astèrix, el signe de igual i el seu valor, com en l'exemple.

      
        [href*="modo"]{
          background-color: green;
        }
      
    

5. SELECTOR ATRIBUT I QUE ACABI AMB UN CERT VALOR

Farem servir, entre claudàtors, el nom de l'atribut, el signe dòlar, el signe de igual i el seu valor, com en l'exemple.

      
        [href$="blau"]{
          background-color: steelblue;
        }
      
    

6. SELECTOR ATRIBUT I QUE COMENCI AMB UN CERT VALOR o UN CERT VALOR-

Farem servir, entre claudàtors, el nom de l'atribut, el signe barra vertical, el signe de igual i el seu valor, com en l'exemple.

      
        [href|=en]{
          background-color: orangered;
        }
      
    

Selecciona en o en-

En la documentació de MDNwebdocs teniu més informació sobre els selectors de classe en CSS.

Anar a tipus de selectors